import { Button, Space } from 'antd';
import { useState, useEffect, useContext, useRef } from 'react'
import { useLocation, useHistory } from 'react-router-dom';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';

import { createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';
import { resourcePath } from '../../../../../../utils/resource';
import { Icon, Style } from 'ol/style';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import jcyjContext from '../jcyjContext';
import { Overlay } from 'ol';
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
import { clearHighlight } from '../../../../../../utils/helper/mapHelper';
import CztApi from '../../../../../../utils/apis/CztApi';
import Jzzy from '../Dzjc2/Dztool/Jzzy';
import JzzyApi from '../../../../../../utils/apis/JzzyApi';


const MenuBtn = props => {
    const { title, selected } = props;
    return <Button size='large' style={{
        height: 50,
        fontSize: 20,
        background: 'rgba(1,15,31,0.7)',
        color: "#fff",
        border: selected ? `2px solid #5EFFFF` : '1px solid rgba(9,107,225,0.8)',
    }} {...props}>{title}</Button>
}



export default function BottomMenu(props) {

    const {setIsClosed}=useContext(jcyjContext)
    const pathname = useLocation()?.pathname;
    const history = useHistory();
    const map = useBusinessMap();

    // const {setIconOnclickXq}=useContext(jcyjContext)

    const [featuresDatas, setFeaturesDatas] = useState();
    const {cbYxList}=props;

    // useEffect(() => {
    //     JcyjApi.jcdList().then(resp => {
    //         const features = resp.rows?.filter(row => {
    //             return row.geom
    //         })?.map(item => {
    //             return dataToFeature(item)
    //         })
    //         setFeaturesDatas(features);
    //     })
    // }, [])

    // useEffect(() => {
    //     if (map) {
    //         const handler = evt => {
    //             //console.log("点击了我",evt)
    //             const features = map.getFeaturesAtPixel(evt.pixel);
    //            // console.log("features",features)
    //             const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
    //             if (item) {
    //                 // setHdDetailItem(null);
    //                 // setYqDetailItem(null);
    //                 // setSkDetailItem(null);
    //                 switch (item.jcdlx) {
    //                     case '地震':
    //                         setIconOnclickXq(item)
    //                         break;
    //                     case '地灾':
    //                         setIconOnclickXq(item)
    //                         break;
    //                     case '火灾':
    //                         setIconOnclickXq(item)
    //                         break;
    //                     default:
    //                 }
    //             }

    //         }
    //         map.on('singleclick', handler);

    //         return () => {
    //             map.un('singleclick', handler);
    //         }
    //     }
    // }, [map,setIconOnclickXq])
    const [cztxlName, setCztxlName] = useState();
    const [jzzyxlName, setJzzyxlName] = useState();
   
    useEffect(() => {
        const cbName = cbYxList ? cbYxList.map(item => item?.name) : [];
   
        CztApi.list(cbName).then(resp => {
            if (resp.rows) {
                // console.log('czt22',resp)
                const datas = resp?.rows.map(item => {
                    const geom = item?.geom;
                    const cztmc = item?.cztmc;
                    const cztdl = item?.cztdl;
                    const fhjb = item?.fhjb;
                    return {
                        geom,
                        cztmc,
                        cztdl,
                        fhjb
                    }
                })
                setCztxlName(datas)
   
            }
        })
        JzzyApi.list(cbName).then(resp => {
            if (resp.data) {
                // console.log('jzzy22',resp)
                const datas = resp?.rows.map(item => {
                    const geom = item?.geom;
                    const cztmc = item?.cztmc;
                    const cztdl = item?.cztdl;
                    const fhjb = item?.fhjb;
                    return {
                        geom,
                        cztmc,
                        cztdl,
                        fhjb
                    }
                })
                setJzzyxlName(datas)
            }
        })
    }, [cbYxList])
   
   
    const [qp, setqp] = useState();
    const [ttipJjx, setTtipJjx] = useState();
    const popupRef = useRef(null);
    useEffect(() => {
        if (map) {
            const handler = evt => {
                const popup = new Overlay({
                    element: popupRef.current,
                });
                map.addOverlay(popup);
                const features = map.getFeaturesAtPixel(evt.pixel);
                const coordinate = features?.find(feature => feature.get('jcdlx'))?.getGeometry()?.getCoordinates();
                const coordinate1 = features?.find(feature => feature.get('cztdl'))?.getGeometry()?.getCoordinates();
                const coordinate2 = features?.find(feature => feature.get('jzzydl'))?.getGeometry()?.getCoordinates();
                // console.log('coordinate',coordinate)
                if(coordinate){
                     popup.setPosition(coordinate);
                }else if(coordinate1){
                    popup.setPosition(coordinate1);
                }else{
                    popup.setPosition(coordinate2);
                }
                const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
                const item1 = features?.find(feature => feature.get('cztdl'))?.getProperties();
                const item2 = features?.find(feature => feature.get('jzzydl'))?.getProperties();

                const tooltip = item?.zdm;
                const ttip = item?.jcjjx;
                const tooltip1 = item1?.cztmc;
                const ttip1= item1?.fhjd;
                const tooltip2 = item2?.jzzymc;
                // const ttip2 = item2?.fhjd;
                if(item){
                    setqp(tooltip);
                setTtipJjx(ttip)
                }else if(tooltip1){
                    setqp(tooltip1);
                    // setTtipJjx(ttip1)
                }else{
                    setqp(tooltip2);
                // setTtipJjx(ttip2)
                }
               //console.log('item',item)
                
                
                let popover = bootstrap.Popover.getInstance(popupRef.current);
                if (popover) {
                    popover.dispose();
                }
                popover = new bootstrap.Popover(popupRef.current, {
                    animation: false,
                    container: popupRef.current,
                    content: null,
                    html: true,
                    placement: 'right'
                });
                popover.show();
            }
            map.on('pointermove', handler);
            return () => {
                map.un('pointermove', handler);
            }
        }
    }, [map])

    // function jcdList(datalx, iconlx) {
    //     let dtuLayer;
    //     const allLayers = map.getLayers().getArray();
    //     [...allLayers].forEach(l => {
    //         if (l?.get("layerName") === 'icon-layer')
    //             map.removeLayer(l);
    //     })
    //     dtuLayer = createLayer((feature) => {
    //         return new Style({
    //             image: new Icon({
    //                 src: resourcePath.mapIcons[iconlx],
    //                 scale: 0.7,
    //                 anchor: [0.5, 1]
    //                 // size: [60, 98],
    //                 // scale: 1 / 24
    //             })
    //         })
    //     }, featuresDatas?.filter(feature => feature.get('jcdlx') === `${datalx}`) || []);
    //     dtuLayer.set('layerName', 'icon-layer');
    //     dtuLayer.set('type', `${datalx}`)
    //     map.addLayer(dtuLayer)
    // }

    // function jcdList(datalx, iconlx) {
    //     let dtuLayer;
    //     const allLayers = map.getLayers().getArray();
    //     [...allLayers].forEach(l => {
    //         if (l?.get("layerName") === 'icon-layer')
    //             map.removeLayer(l);
    //     })
    //     dtuLayer = createLayer((feature) => {
    //         return new Style({
    //             image: new Icon({
    //                 src: resourcePath.mapIcon[iconlx],
    //                 scale: 0.7,
    //                 anchor: [0.5, 1]
    //                 // size: [60, 98],
    //                 // scale: 1 / 24
    //             })
    //         })
    //     }, featuresDatas?.filter(feature => feature.get('jcdlx') === `${datalx}`) || []);
    //     dtuLayer.set('layerName', 'icon-layer');
    //     dtuLayer.set('type', `${datalx}`)
    //     map.addLayer(dtuLayer)
    // }

    return <>
        <div>
            <div style={{
                zIndex: 1,
                position: 'absolute',
                bottom: 30,
                left: 300,
                right: 300,
                textAlign: 'center',
                pointerEvents: "none"
            }}>
                <span style={{
                    pointerEvents: 'auto'
                }}>
                    <Space size={20} >
                        <MenuBtn title={'防汛监测'} selected={pathname.indexOf('fxjc') > -1} onClick={e => {
                            // jcdList('雨情', 'yq');
                            map.getLayers().forEach(layer => {
                                //console.log('区划中获取所有图层的遍历', layer)
                                if (layer.get('layerName') === '区县图层颜色') {
                                    //console.log('区划中获取所有图层的遍历', layer.getFeatures())
                                    layer.getSource().clear();
                                    //targetLayer = layer;
                                }
                            });
                            history.push('fxjc');
                            
                            clearHighlight(map);
                            setIsClosed(true)
                        }} />
                        <MenuBtn title={'地震监测'} selected={pathname.indexOf('dzjc') > -1} onClick={e => {
                            // jcdList('地震', 'dz');
                            map.getLayers().forEach(layer => {
                                //console.log('区划中获取所有图层的遍历', layer)
                                if (layer.get('layerName') === '区县图层颜色') {
                                    //console.log('区划中获取所有图层的遍历', layer.getFeatures())
                                    layer.getSource().clear();
                                    //targetLayer = layer;
                                }
                            });
                            history.push('dzjc');
                            clearHighlight(map);
                            setIsClosed(true)
                        }} />
                        <MenuBtn title={'地灾监测'} selected={pathname.indexOf('dizjc') > -1} onClick={e => {
                            // jcdList('地灾', 'dizjc');
                            map.getLayers().forEach(layer => {
                                //console.log('区划中获取所有图层的遍历', layer)
                                if (layer.get('layerName') === '区县图层颜色') {
                                    //console.log('区划中获取所有图层的遍历', layer.getFeatures())
                                    layer.getSource().clear();
                                    //targetLayer = layer;
                                }
                            });
                            history.push('dizjc');
                            clearHighlight(map);
                            setIsClosed(true)
                        }} />
                        <MenuBtn title={'火灾监测'} selected={pathname.indexOf('sljc') > -1} onClick={e => {
                            // jcdList('火灾', 'sl');
                            map.getLayers().forEach(layer => {
                                //console.log('区划中获取所有图层的遍历', layer)
                                if (layer.get('layerName') === '区县图层颜色') {
                                    //console.log('区划中获取所有图层的遍历', layer.getFeatures())
                                    layer.getSource().clear();
                                    //targetLayer = layer;
                                }
                            });
                            history.push('sljc');
                            clearHighlight(map);
                            setIsClosed(true)
                        }} />
                    </Space>
                </span>
            </div>
            <div ref={popupRef} style={{
                display: 'inline-block',
                whiteSpace: 'nowrap',
                borderRadius: 10,/* 设置圆角半径 */
                backgroundColor: 'black', /* 设置背景色为黑色 */
                padding: 10, /* 可选：添加内边距以增加可读性 */
                color: 'white',/* 可选：设置文本颜色为白色 */
            }} >
                {qp}<br />{ttipJjx ? '警戒线:'+ttipJjx:" "}
            </div>
        </div>


    </>

}